<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理</title>
    <link href="../assets/bootstrap.css" rel="stylesheet">
    <link href="../assets/main.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="row">
            <div class="col-md-2">
                <button class="btn btn-default" type="button" onclick="openAddModal()">新增</button>
                <button class="btn btn-default" type="button" onclick="batchRemove()">批量删除</button>
            </div>
            <div class="col-md-10">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="name">学历名称</label>
                        <input style="width: 150px;" type="text" class="form-control" id="name" placeholder="请输入">
                    </div>
                    <button type="button" class="btn btn-default" onclick="fetchDataAndRender($('#name').val())">搜索</button>
                    <button type="submit" class="btn btn-default">清空</button>
                </form>
            </div>
        </div>
        <table class="table table-hover">
            <thead>
            <tr>
                <th scope="col" style="text-align: center">
                    <input type="checkbox" id="selectAll" onclick="toggleSelectAll()">
                </th>
                <th scope="col" style="display: none">ID</th>
                <th scope="col">序号</th>
                <th scope="col">学历名称</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody id="tableBody">
            </tbody>
        </table>
    </div>
</div>

<!-- 模态框 -->
<div id="editModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" style="margin-top: 10%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">编辑框</h4>
            </div>
            <div class="modal-body">
                <iframe id="editIframe" style="width: 100%; height: 200px; border: none;"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="saveAndCloseModal()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script src="../assets/jquery.js"></script>
<script src="../assets/bootstrap.js"></script>

<script>
    //渲染表格
    function renderTable(data) {
        var tableBody = $("#tableBody");
        tableBody.empty();
        var index = 1;
        data.forEach(function(item) {
            var row = "<tr>" +
                "<td  style=\"text-align: center;\"><input type='checkbox' class='form-check-input' data-id='" + item.id + "'></td>" +
                "<td  style=\"display: none;\">" + item.id + "</td>" +
                "<td>" + index++ + "</td>" +
                "<td>" + item.name + "</td>" +
                "<td>" +
                "<button type='button' class='btn btn-success' onclick='openEditModal(" + item.id + ")'>修改</button>" +
                "<button type='button' class='btn btn-danger' onclick='remove(" + item.id + ")'>删除</button>" +
                "</td>" +
                "</tr>";
            tableBody.append(row);
        });
    }

    //模糊查询
    function fetchDataAndRender(e) {
        $.ajax({
            url: "/api/typeList?name=" + e,
            type: "GET",
            success: function(data) {
                renderTable(data);
            },
            error: function(xhr, status, error) {
                console.error("Error: ", error);
            }
        });
    }
    //打开修改模态窗
    function openEditModal(id) {
        var editIframe = document.getElementById("editIframe");
        editIframe.src = "/type/edit/" + id;
        $("#editModal").modal("show");
    }
    //打开新增模态窗
    function openAddModal() {
        var editIframe = document.getElementById("editIframe");
        editIframe.src = "/type/add/";
        $("#editModal").modal("show");
    }

    //全选
    function toggleSelectAll() {
        var checkboxes = document.querySelectorAll("#tableBody input[type='checkbox']");
        checkboxes.forEach(function(checkbox) {
            checkbox.checked = document.getElementById("selectAll").checked;
        });
    }
    var ids = [];
    //批量删除
    function batchRemove() {
        ids = [];
        var checkboxes = document.querySelectorAll("#tableBody input[type='checkbox']:checked");
        checkboxes.forEach(function(checkbox) {
            ids.push(checkbox.getAttribute("data-id"));
        });
        if (ids.length > 0) {
            goRemove(ids)
        } else {
            alert("请选择要删除的项");
        }
    }

    //单个删除
    function remove(id) {
        ids = [id];
        goRemove(ids);
    }

    //调用接口删除
    function goRemove(e){
        $.ajax({
            url: "/api/typeRemove?ids="+e,
            type: "POST",
            success: function(response) {
                if (response === 200) {
                    alert("删除成功");
                    fetchDataAndRender();
                } else  if(response === 1451){
                    alert("删除失败，选中行有相关联数据");
                } else {
                    alert("删除失败："+response);
                }
            },
            error: function(xhr, status, error) {
                console.error("请求失败:", error);
                alert("删除失败");
            }
        });
    }

    //新增和修改保存数据
    function saveAndCloseModal() {
        var editIframe = document.getElementById("editIframe");
        var id = editIframe.contentWindow.document.getElementById("id").innerText;
        var name = editIframe.contentWindow.document.getElementById("typeName").value;
        var type = {id: id, name: name};
        console.log(type)
        $.ajax({
            url: "/api/typeSave",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(type),
            success: function(response) {
                if (response === 200) {
                    alert("保存成功");
                    $("#editModal").modal("hide");
                    fetchDataAndRender();
                }else if(response===501){
                    alert("带星*必填项不能为空！");
                } else {
                    alert("保存失败：" + response);
                }
            },
            error: function(xhr, status, error) {
                console.error("请求失败:", error);
                alert("保存失败");
            }
        });
    }

    $(document).ready(function() {
        fetchDataAndRender();
    });
</script>
</body>
</html>
